<template>
  <div>
    <el-card class="box-card">
      <el-form
        ref="selectform"
        :inline="true"
        :model="selectform"
        class="demo-form-inline ManagementClass">
        <el-form-item
          prop="oneClassName"
          label="图片名称">
          <el-input
            v-model="selectform.oneClassName"
            placeholder="请输入图片名称"
            prefix-icon="el-icon-search"
            class="AuthorityInput managementBtn" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="selectSubmit('selectform')">查询</el-button>
          <el-button
            type="info"
            @click="selectResetForm('selectform')">重置</el-button>
          <el-button
            type="success"
            @click="AddSubmitDialog">新增</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card
      class="box-card"
      style="margin-top:6px">
      <el-table
        v-loading="loading"
        :data="tableData"
        size="medium"
        stripe
        style="width: 100%">
        <el-table-column
          show-overflow-tooltip
          prop="index"
          label="序号" />
        <el-table-column
          show-overflow-tooltip
          prop="imgurl"
          label="图片">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.imgurl"
              :preview-src-list="[scope.row.imgurl]"
              style="width: 40px; height: 40px"/>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="imgname"
          label="图片名称" />
        <el-table-column
          show-overflow-tooltip
          prop="imgdetail"
          label="图片详情" />
        <el-table-column
          show-overflow-tooltip
          prop="sort"
          label="排序" />
        <el-table-column
          show-overflow-tooltip
          prop="createTimeString"
          label="创建时间" />
        <el-table-column
          show-overflow-tooltip
          prop="updateTimeString"
          label="更新时间" />
        <el-table-column
          label="操作"
          width="160">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="handleEdit(scope.$index, scope.row)" />
            <el-button
              type="success"
              icon="el-icon-upload"
              circle
              @click="uploadImg(scope.$index, scope.row)" />
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteBtn(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <pagination
      :pager="pager"
      @search="search" />

    <el-dialog
      :visible.sync="Addvisble"
      :close-on-click-modal="false"
      :lock-scroll="false"
      title="新增"
      width="320px"
      center>
      <el-form
        ref="AddValidateForm"
        :model="AddValidateForm"
        :rules="AddRules"
        class="demo-ruleForm AddvisbleClass">

        <el-form-item label="图片" prop="fileListUrl">
          <el-upload
            ref="upload"
            :action="imgurl"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :file-list="AddfileList"

            class="avatar-uploader"
          >
            <img v-if="addImg" :src="addImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>

        <el-form-item
          label="图片名称:"
          prop="imgname">
          <el-input
            v-model="AddValidateForm.imgname"
            :rows="3"
            type="textarea"
            placeholder="请输入内容"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>

        <el-form-item
          label="图片详情:"
          prop="imgdetail">
          <el-input
            v-model="AddValidateForm.imgdetail"
            :rows="7"
            type="textarea"
            placeholder="请输入内容"
            maxlength="100"
            show-word-limit
        /></el-form-item>

        <el-form-item
          v-if="type == 1&&roles == 0"
          label="文字水印:"
          prop="fontname">
          <el-input
            v-model="AddValidateForm.fontname"
            type="text"/>
        </el-form-item>

        <el-form-item v-if="type == 1" label="水印:" prop="roles">
          <el-radio-group v-model="roles" @change="shuiRoles">
            <el-radio label="0">文字水印</el-radio>
            <el-radio label="1">图片水印</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="排序:"
          prop="sort">
          <el-input
            v-model="AddValidateForm.sort"
            type="text"
            maxlength="3"/>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="AddsubmitForm('AddValidateForm')">提交</el-button>
          <el-button @click="Addvisble = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible.sync="editvisble"
      :close-on-click-modal="false"
      :lock-scroll="false"
      title="编辑"
      width="320px"
      center>
      <el-form
        ref="editValidateForm"
        :model="editValidateForm"
        :rules="editRules"
        class="demo-ruleForm AddvisbleClass">

        <el-form-item
          label="图片名称:"
          prop="imgname">
          <el-input
            v-model="editValidateForm.imgname"
            :rows="3"
            type="textarea"
            placeholder="请输入内容"
            maxlength="20"
            show-word-limit
          />
        </el-form-item>

        <el-form-item
          label="图片详情:"
          prop="imgdetail">
          <el-input
            v-model="editValidateForm.imgdetail"
            :rows="7"
            type="textarea"
            placeholder="请输入内容"
            maxlength="100"
            show-word-limit
        /></el-form-item>

        <el-form-item
          label="排序:"
          prop="sort">
          <el-input
            v-model="editValidateForm.sort"
            type="text"
            maxlength="3"/>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="editsubmitForm('editValidateForm')">提交</el-button>
          <el-button @click="editvisble = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      :visible.sync="upAddvisble"
      :close-on-click-modal="false"
      :lock-scroll="false"
      title="修改图片"
      width="320px"
      center>
      <el-form
        ref="upForm"
        :model="upForm"
        :rules="upRules"
        class="demo-ruleForm AddvisbleClass">

        <el-form-item label="图片" prop="fileListUrl">
          <el-upload
            ref="upload"
            :action="imgurl"
            :on-success="handleAvatarSuccess"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :file-list="editfileList"
            class="avatar-uploader"
          >
            <img v-if="upImg" :src="upImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
        </el-form-item>

        <el-form-item
          v-if="uproles == 0 && type ==1"
          label="文字水印:"
          prop="fontname">
          <el-input
            v-model="upForm.fontname"
            type="text"/>
        </el-form-item>
        <el-form-item v-if="type ==1" label="水印:" prop="uproles">
          <el-radio-group v-model="uproles" @change="shuiuproles">
            <el-radio label="0">文字水印</el-radio>
            <el-radio label="1">图片水印</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="upsubmitForm('upForm')">提交</el-button>
          <el-button @click="upAddvisble = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<style scoped>
</style>

<script>
import { queryAll, addImg, updateImgDetail, updateImgUrl, deleteImg } from '@/api/ImgManagement/conmonImgApi/index'
import pagination from '@/components/pagination/index'
import conmom from '@/common/commom'

export default {
  components: {
    pagination
  },
  data() {
    return {
      pager: {
        pageSize: 10,
        currentPage: 1,
        totalPage: 0
      },
      tableData: [],
      selectform: {
        oneClassName: ''
      },
      loading: false,
      Addvisble: false,
      editvisble: false,
      AddValidateForm: {
        imgname: '',
        imgdetail: '',
        sort: '',
        fileListUrl: '',
        fontname: ''
      },
      AddRules: {
        imgname: [
          {
            required: true,
            message: '请输入图片名称',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          },
          { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'change' }
        ],
        fileListUrl: [
          {
            required: true,
            message: '请选择图片',
            trigger: 'blur'
          }
        ]
      },
      editValidateForm: {
        imgname: '',
        imgdetail: '',
        sort: ''
      },
      editRules: {
        imgname: [
          {
            required: true,
            message: '请输入图片名称',
            trigger: 'blur'
          }
        ],
        sort: [
          { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'change' }
        ]
      },
      editID: '',
      type: '',
      imgurl: `${conmom.apihost}img/addImg`,
      addImg: '',
      AddfileList: [],
      roles: '0',
      uproles: '0',
      upImg: '',
      upForm: {
        fileListUrl: '',
        fontname: ''
      },
      editfileList: [],
      upRules: {
        fileListUrl: [
          {
            required: true,
            message: '请选择图片',
            trigger: 'blur'
          }
        ]
      },
      upAddvisble: false
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    search() {
      this.getInfo()
    },
    getInfo() {
      this.loading = true
      queryAll(this.parameter()).then(res => {
        res.data.rows.forEach((item, index) => {
          item.index = index + 1 + (this.pager.currentPage - 1) * this.pager.pageSize
          return item
        }
        )
        this.tableData = res.data.rows
        this.pager.totalPage = res.data.total
        this.loading = false
      })
    },
    parameter() {
      switch (this.$route.name) {
        case 'bannerManagement':
          this.type = 1
          break
        case 'watermarkManagement':
          this.type = 3
          break
        case 'functionManagement':
          this.type = 2
          break
        case 'qrCodeManagement':
          this.type = 4
          break
        default:
          break
      }
      const obj = {
        current: this.pager.currentPage,
        size: this.pager.pageSize,
        keywordOne: this.selectform.oneClassName,
        keywordTwo: this.type
      } // 默认列表字段数据
      return obj
    },
    // 搜索
    selectSubmit(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getInfo()
        } else {
          return false
        }
      })
    },
    // 搜索重置
    selectResetForm(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].resetFields()
      this.getInfo()
    },
    shuiRoles(e) {
      if (e == 1) {
        this.AddValidateForm.fontname = ''
      }
    },
    shuiuproles(e) {
      if (e == 1) {
        this.upForm.fontname = ''
      }
    },
    // 新增弹框
    AddSubmitDialog() {
      this.Addvisble = true
      this.$nextTick(() => {
        this.$refs.AddValidateForm.resetFields()
        for (var key in this.AddValidateForm) {
          if (this.AddValidateForm.hasOwnProperty(key)) {
            this.AddValidateForm[key] = ''
          }
        }
        this.addImg = ''
        this.roles = '0'
      })
    },
    AddsubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.AddValidateForm.bytes = this.AddValidateForm.fileListUrl.bytes
          this.AddValidateForm.originalFilename = this.AddValidateForm.fileListUrl.originalFilename
          this.AddValidateForm.imgtype = this.type
          addImg(this.AddValidateForm).then(res => {
            this.pager.currentPage = 1
            this.$refs[formName].resetFields('AddValidateForm')
            this.Addvisble = false
            this.addImg = ''
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.getInfo()
          })
        } else {
          return false
        }
      })
    },

    editsubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.editValidateForm.imgtype = this.type
          this.editValidateForm.id = this.editID
          updateImgDetail(this.editValidateForm).then(res => {
            this.$refs[formName].resetFields('editValidateForm')
            this.editvisble = false
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.getInfo()
          })
        } else {
          return false
        }
      })
    },

    // 编辑
    handleEdit(index, row) {
      this.editValidateForm.imgname = row.imgname
      this.editValidateForm.imgdetail = row.imgdetail
      this.editValidateForm.sort = row.sort
      this.editID = row.id
      this.editvisble = true
    },
    // 删除
    deleteBtn(index, row) {
      this.$confirm('您确定要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteImg(row.id).then(res => {
            this.$message({
              message: res.data,
              type: 'success'
            })
            this.getInfo()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleAvatarSuccess(res, file) {
      this.addImg = URL.createObjectURL(file.raw)
      this.AddValidateForm.fileListUrl = res.data
      this.upImg = URL.createObjectURL(file.raw)
      this.upForm.fileListUrl = res.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isGIF = file.type === 'image/gif'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG && !isGIF && !isPNG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/GIF 格式!')
        this.AddValidateForm.fileListUrl = ''
        this.addImg = ''
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
        this.AddValidateForm.fileListUrl = ''
        this.addImg = ''
      }
      return (isJPG || isGIF || isPNG) && isLt2M
    },
    uploadImg(index, row) {
      this.upAddvisble = true
      this.$nextTick(() => {
        this.$refs.upForm.resetFields()
        for (var key in this.upForm) {
          if (this.upForm.hasOwnProperty(key)) {
            this.upForm[key] = ''
          }
        }
        this.uproles = '0'
        this.upForm.id = row.id
        this.upImg = row.imgurl
      })
    },
    upsubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.upForm.bytes = this.upForm.fileListUrl.bytes
          this.upForm.originalFilename = this.upForm.fileListUrl.originalFilename
          this.upForm.imgtype = this.type
          updateImgUrl(this.upForm).then(res => {
            this.$refs[formName].resetFields('upForm')
            this.upAddvisble = false
            this.upImg = ''
            this.$message({
              message: res.data,
              type: 'success'
            })
            this.getInfo()
          })
        } else {
          this.$message({
            message: '当前图片未做修改',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>
